<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>库存查询</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        库存状态:<Select clearable  style="width: 120px;">
        <Option value="0">正常</Option>
        <Option value="0">报警</Option>
      </Select>
      </FormItem>
      <FormItem>
        设备名称：<Input
        type="text"
        v-model="params.order_id"
        clearable
        placeholder="设备名称"
        style="width: 120px"
      />
      </FormItem>
      <FormItem>
        设备编号:<Input
        type="text"
        v-model="params.order_id"
        clearable
        placeholder="设备编号"
        style="width: 120px"
      />
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px"
        >搜索</Button
        >
        <Button type="success" @click="search" style="margin-right: 10px"
        >导出</Button
        >
      </FormItem>
    </Form>
    <div><span style="font-weight: bold;">报警阈值设置:</span><span>当"库存/标准库存"小于50%时，进行报警提示</span><Button type="success"  @click="add4" style="margin-left: 10px"
    >阈值设置</Button
    ></div>
    <div style="margin-top: 20px;">
      <Table :columns="columns1" :data="tableData" :height="height">
        <template slot-scope="{ row }" slot="status">
          <span class="success" v-if="row.status === '1'">正常</span>
          <span class="error" v-else>异常</span>
        </template>
        <template slot-scope="{ row }" slot="order_name">
          <span>{{ row.order_name[0] }}</span>
        </template>
        <template slot-scope="{ row }" slot="is_push">
          <span class="success" v-if="row.is_push == 2">完成</span>
          <span class="error" v-else>未完成</span>
        </template>
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            v-hasPermission="['37']"
            @click="add2()"
          >库存详情</Button>
        </template>
      </Table>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page
        background
        layout="prev, pager, next"
        :page-size="params.limit"
        :total="total"
        @on-change="handleCurrentChange"
        :current-page="params.page"
      />
      <Modal v-model="modal2"    :mask-closable="false" width="1000" >
        <Form :label-width="110">
          <div><h4 class="door_device">库存详情--B8164</h4></div>
          <Form ref="formInline" :model="request" inline>
            <FormItem>
              <DatePicker
                type="daterange"
                @on-change="timechange"
                :transfer="true"
                placement="bottom-end"
                placeholder="请选择开始-结束时间"
                style="width: 200px"
              ></DatePicker>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
              <Button type="primary" @click="search" style="margin-right: 10px">导出</Button>
              <Button type="primary" @click="add3"  style="margin-right: 10px">设置标准库存</Button>
            </FormItem>
            <div style="display: flex;"><p>剩余库存总数:</p><span>14</span></div>
            <Table border :columns="columns2" :data="data2"></Table>
            <div style="display: flex;">
              <div><p>库存更新日志:</p></div>
              <div>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
              </div>
            </div>
          </Form>




          <!--          <Tabs value="name1">-->
          <!--            <TabPane label="未绑定设备" name="name1">-->
          <!--              <Form ref="formInline" :model="request" inline>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
          <!--                </FormItem>-->
          <!--                <Table border :columns="columns3" :data="data3"></Table>-->
          <!--              </Form>-->
          <!--            </TabPane>-->
          <!--            <TabPane label="已绑定设备" name="name2">-->
          <!--              <Form ref="formInline" :model="request" inline>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
          <!--                </FormItem>-->
          <!--                <Table border :columns="columns3" :data="data3"></Table>-->
          <!--              </Form>-->

          <!--            </TabPane>-->
          <!--          </Tabs>-->
        </Form>
      </Modal>
      <Modal v-model="modal3"    :mask-closable="false" width="1000" >
        <Form :label-width="110">
          <div><h4 class="door_device">库存详情</h4></div>
          <Form ref="formInline" :model="request" inline>
            <FormItem>
              <DatePicker
                type="daterange"
                @on-change="timechange"
                :transfer="true"
                placement="bottom-end"
                placeholder="请选择开始-结束时间"
                style="width: 200px"
              ></DatePicker>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
              <Button type="primary" @click="search" style="margin-right: 10px">导出</Button>
              <Button type="success" style="margin-right: 10px">完成标准库存设置</Button>
              <Button type="error" style="margin-right: 10px">取消</Button>
            </FormItem>
            <div><p>剩余库存总数</p></div>
            <Table border :columns="columns2" :data="data2"></Table>
            <div style="display: flex;">
              <div><p>库存更新日志:</p></div>
              <div>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
                <p>2011-09-16 17：55：19上货 未更新库存 </p>
              </div>
            </div>
          </Form>

          <!--          <Tabs value="name1">-->
          <!--            <TabPane label="未绑定设备" name="name1">-->
          <!--              <Form ref="formInline" :model="request" inline>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
          <!--                </FormItem>-->
          <!--                <Table border :columns="columns3" :data="data3"></Table>-->
          <!--              </Form>-->
          <!--            </TabPane>-->
          <!--            <TabPane label="已绑定设备" name="name2">-->
          <!--              <Form ref="formInline" :model="request" inline>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
          <!--                </FormItem>-->
          <!--                <FormItem>-->
          <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
          <!--                </FormItem>-->
          <!--                <Table border :columns="columns3" :data="data3"></Table>-->
          <!--              </Form>-->

          <!--            </TabPane>-->
          <!--          </Tabs>-->
        </Form>
      </Modal>
      <Modal v-model="modal4"   :mask-closable="false">
        <Form :label-width="110">
          <div class="door_device"><h4>库存报警阈值设置</h4></div>
          <FormItem label="阈值设置:">
            <Input value="50"></Input>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        columns2: [
          {
            title: '商品名称',
            key: 'name'
          },
          {
            title: '已售',
            key: 'age'
          },
          {
            title: '库存',
            key: 'address'
          },
          {
            title: '标准库存',
            key: 'strand'

          },
          {
            title: '待补货',
            key: 'wait'
          }
          // {
          //   title: 'Address',
          //   key: 'address'
          // }
        ],
        data2: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            strand:'11',
            wait:"22"
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            strand:'11',
            wait:"22"
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            strand:'11',
            wait:"22"
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            strand:'11',
            wait:"22"
          }
        ],
        params: {
          device_time: [],
          status: 1,
          user_id: "",
          order_id: "",
          activity_id: "",
          page: 1,
          limit: 10,
        },
        total: 0,
        page: {},
        height: this.$store.state.height,
        modal1: false,
        modal2: false,
        modal3: false,
        modal4:false,
        data1: [
          {
            id: 1,
            title: "机器组3",
          },
          {
            id: 2,
            title: "机器组4",
          },
        ],
        request: {
          device_number: "",
          page: 1,
        },
        columns1: [
          {
            title: "设备名称",
            key: "sbmc",
            minWidth: 150,
            align: "center",
          },
          {
            title: "设备编号",
            key: "sbbh",
            minWidth: 300,
            align: "center",
          },
          {
            title: "设备地址",
            key: "sbdz",
            minWidth: 150,
            align: "center",
          },

          {
            title: "剩余库存",
            key: "sykc",
            minWidth: 150,
            align: "center",
          },
          {
            title: "标准库存",
            key: "bzkc",
            minWidth: 150,
            align: "center",
          },
          {
            title: "库存阀值",
            key: "kcfz",
            minWidth: 150,
            align: "center",
          },
          {
            title: "库存状态",
            key: "kczt",
            minWidth: 150,
            align: "center",
          },
          {
            title: "操作",
            slot: "option",
            minWidth: 150,
            align: "center",
          }
        ],
        tableData: [],
        role_id:null,
      };
    },
    mounted() {

      this.init();
    },
    methods: {
      add2(){
        this.cancel();
        this.modal2 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      add3(){
        this.cancel();
        this.modal3 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      add4(){
        this.cancel();
        this.modal4 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      init() {
        this.axios.post("order/order_list", this.params).then((res) => {
          console.log("this.params: ", this.params);
          if (res.code == 1) {
            console.log(res);
            this.total = res.data.count;
            //this.tableData = res.data.list;
            var singleRow={sbmc:'ResMed (2) Level 1 Pantry - Thomas',sbbh:'B104',sbdz:'50 Macpherson Road, #08-01 Singapore 348471',sykc: '124',bzkc: '171',kcfz:'73%',kczt:'正常'}
            this.tableData.push(singleRow)
          }
        });
      },
      // goDel(id) {
      //   this.$router.push({ path: "/order/detail", query: { id } });
      // },
      search() {
        this.params.page = 1;
        this.init();
      },
      confirm() {
        this.modal1 = false;
        this.$Message.success("保存成功！");
        this.cancel();
      },
      cancel() {},
      add() {
        this.modal1 = true;
      },
      setStatus(id, status) {
        var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.$Message.success("操作成功");
          },
          onCancel: () => {},
        });
      },
      lists() {},
      timechange(val) {
        console.log(val);
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.init();
      },
    },
  };
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .door_device{
    position: relative;
    top: -20px;
  }
</style>
